<template>
    <view :class="$style.page">
        <PageHeader>
            <image src="@/static/logo.png" mode="widthFix" :class="$style.logo" />
        </PageHeader>
        <view :class="$style.banners">
            <!-- <uv-swiper 
                :list="bannerList" 
                previousMargin="30" 
                nextMargin="30" 
                circular 
                indicator
                :autoplay="false" >
            </uv-swiper> -->
            <nut-swiper :class="$style.swiper" :pagination-visible="true" pagination-color="#426543" pagination-unselected-color="#808080" auto-play="3000">
                <nut-swiper-item v-for="item in banners" :key="item.id">
                    <a style="display: block;" :href="item.link">
                        <img style="width: 100%; display: block;" :src="staticUrl + item.cover" alt="" />
                    </a>
                </nut-swiper-item>
            </nut-swiper>
        </view>

        <view class="p-l-r m-t-30">
            <CardModule title="推荐服务" openType="redirect" url="/pages/apps/index">
                <view :class="$style.schoolApp">
                    <template v-for="app in recommendApps" :key="app.id">
                        <AppLink :class="$style.item" :url="app.url" :id="app.id" :link-type="app.linkType" :qr="app.qr">
                            <AppIcon  :type="app.coverType" :class="$style.icon" :icon="app.cover" :color="app.bccolor" />
                            <view :class="$style.title">{{ app.name }}</view>
                        </AppLink>
                    </template>
                </view>
            </CardModule>
        </view>

        <view class="p-l-r m-t-30">
            <CardModule title="常用服务" openType="redirect" url="/pages/apps/index">
                <view :class="$style.schoolApp">
                    <template v-for="app in apps" :key="app.id">
                        <AppLink :class="$style.item" :url="app.url" :id="app.id" :link-type="app.linkType" :qr="app.qr">
                            <AppIcon  :type="app.coverType" :class="$style.icon" :icon="app.cover" :color="app.bccolor" />
                            <view :class="$style.title">{{ app.name }}</view>
                        </AppLink>
                    </template>
                </view>
            </CardModule>
        </view>

        <view class="p-l-r m-t-30">
            <CardModule title="新闻公告" url="/pages/news/index">
                <uni-load-more v-if="newsLoading" status="loading"></uni-load-more>
                <view v-else :class="$style.news">
                    <!-- <template v-for="row in newsList" :key="row.id">
                        <view :class="$style.item" @tap="newsNav(row.id)">
                            <view :class="$style.date">
                                <view :class="$style.dates">
                                    <view :class="$style.date">{{ row.month }}</view>
                                    <view :class="$style.date">{{ row.day }}</view>
                                </view>
                            </view>
                            <view :class="$style.body">
                                <view :class="$style.title">{{ row.title }}</view>
                                <view :class="$style.desc">{{ row.summary }}</view>
                            </view>
                            <view :class="$style.arrow">
                                <uni-icons type="right" color="#90A3BF" size="12"></uni-icons>
                            </view>
                        </view>
                    </template> -->

                    <template v-for="row in newsList" :key="row.id">
                        <view :class="$style.item" @tap="newsNav(row.id)">
                            <view :class="$style.icon"></view>
                            <view :class="$style.body">
                                <view :class="$style.title">{{ row.title }}</view>
                                <view :class="$style.date">{{ row.date }}</view>
                            </view>
                        </view>
                    </template>
                </view>
            </CardModule>
        </view>

        <TabBar />
    </view>


    <AppQr />
    
</template>

<script lang="ts" setup>
    import PageHeader from '@/components/PageHeader.vue'
    import TabBar from '@/TabBar/index.vue'
    import CardModule from './CardModule.vue'
    import AppLink from '@/components/AppLink.vue'
    import AppIcon from '@/components/AppIcon.vue'
import AppQr from '@/components/AppQr.vue'
    


    import { computed, ref } from 'vue';
    import { bannerListApi } from '@/api/Banner';
    import { newsApi, newsListApi } from '@/api/News';
    import { newsDateRange } from '@/utils';
    import { homeAppsApi, recommendAppsApi } from '@/api/Apps';


    const staticUrl = import.meta.env.B_NET_STATIC_URL
    const banners = ref<any[]>([])
    const apps = ref<any[]>([])
    const newsList = ref<any[]>([])

    const newsLoading = ref(true)

    const recommendApps = ref<any[]>([])


    bannerListApi().then(res => {
        if(res.data) {
            banners.value = res.data
        }
    })

    recommendAppsApi(4).then(res => {
        
        if(res.data) {
            recommendApps.value = res.data
        }
    })


    homeAppsApi(4).then(res => {
        
        if(res.data) {
            apps.value = res.data
        }
    })

    newsListApi(newsDateRange(new Date(), 7)).then(res => {
        newsLoading.value = false
        if(res.data && res.data.length > 0) {
            const data = JSON.parse(res.data)

            if(data) {
                data.splice(10)
                data.forEach(row => {
                    let date = new Date(row.date)
                    row.month = String(date.getMonth() + 1).padStart(2, '0')
                    row.day = String(date.getDate()).padStart(2, '0')
                    newsList.value.push(row)
                })
            }

            
            
        }
    })


    async function newsNav(id) {
        uni.showLoading()
        const r = await newsApi(id)
        uni.hideLoading()
        if(r.data) {
            const data = JSON.parse(r.data)
            location.href = data.wblinkurl
        }
    }

    

</script>

<style lang="scss" module>
.logo{
        display: block;
        width: 200rpx;
    }
    .page{
        height: 100vh;
        position: relative;
        padding-bottom: $tab-bar-height;
        background: $background-color;
    }

    .swiper {
        height: 260rpx;
    }


    .schoolApp{
        display: flex;
        align-items: center;
        justify-content: space-between;

        .item{
            width: 142rpx;
        }

        .icon{
            // width: 80rpx;
            // height: 80rpx;
            margin:auto;
            //display: block;
        }

        .title{
            font-size: 28rpx;
            color: $base-font-color;
            line-height: 48rpx;
            margin-top: 10rpx;
            text-align: center;

            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

        }
    }

    // .news{
    //     .item{
    //         margin-top: 40rpx;
    //         &:first-of-type{
    //             margin-top: 0;
    //         }

    //         display: flex;
            
    //     }

    //     .dates{
    //         width: 80rpx;
    //         background-color: $background-color;
    //         .date{
    //             line-height: 48rpx;
    //             font-size: 24rpx;
    //             color: #000;
    //             text-align: center;

    //             &:first-of-type{
    //                 position: relative;
    //                 &::after{
    //                     content: '';
    //                     display: block;
    //                     width: 60rpx;
    //                     height: 1rpx;
    //                     background-color: #E7E7E7;
    //                     margin: auto;
    //                 }
    //             }
    //         }
    //     }

    //     .body{
    //         flex: 1;
    //         margin: 0 20rpx;
    //         display: flex;
    //         flex-direction: column;
    //         justify-content: space-between;
    //         min-width: 0;


    //         .title{
    //             line-height: 48rpx;
    //             font-size: 28rpx;
    //             color: $base-font-color;
    //             font-weight: bold;
    //             overflow: hidden;
    //             text-overflow: ellipsis;
    //             white-space: nowrap;
    //         }

    //         .desc{
    //             line-height: 40rpx;
    //             font-size: 24rpx;
    //             color: #909399;
    //             overflow: hidden;
    //             text-overflow: ellipsis;
    //             white-space: nowrap;
    //         }
    //     }
        
    //     .arrow{
    //         display: flex;
    //         align-items: center;
    //     }
    // }


    .news{
    padding:0 $base-space;
    .item{
        padding:$base-space 0;
        display: flex;

        border-bottom: 1rpx solid $background-color;

        &:last-of-type{
            border-bottom: none;
        }


        align-items: center;

        .icon{
            width: 44rpx;
            height: 44rpx;
            background: url(@/static/news-icon.png) no-repeat;
            background-size: contain;
        }

        .body{
            flex: 1;
            min-width: 0;
            margin-left: 30rpx;

            .title{
                font-size: 32rpx;
                line-height: 48rpx;
                color: #303133;

                overflow: hidden;       /* 溢出隐藏 */
                display: -webkit-box;   /* 使用-webkit-box进行多行文本溢出 */
                -webkit-line-clamp: 2;  /* 限制在2行内 */
                -webkit-box-orient: vertical; /* 垂直排列文本 */
                text-overflow: ellipsis; /* 文本溢出显示省略号 */
            }

            .date{
                line-height: 40rpx;
                color: #909399;
                font-size: 24rpx;
                margin-top: 20rpx;
            }
        }
    }

}
</style>
